<script setup>
    import {ref} from 'vue'                     
    import axios from 'axios'
    import {showMsg} from '@/components/Util';
    import { computed } from 'vue';

    let props = defineProps(['user','type','title','list2'])
    let emits = defineEmits(['submit','close'])
    let obj = computed(()=>{
        return props.user;
    })
    function edit(){
        axios.put('/api/update_xinxi',obj.value,{
            headers:{
                "Content-Type":"application/json"
            }
        }).then(res=>{
            if(res.data.status==200){
                emits('submit');
            }else{
                showMsg(res.data.msg,'warn',2000)
            }
        })
    }
</script>

<template>
    <div class="box">
        <div class="x">
            <span>{{ title }}</span>
            <span @click="emits('submit')" style="cursor: pointer; user-select: none;">X</span>
        </div>
        <input type="text" placeholder="姓名" v-model="obj.username" />
        <input type="text" placeholder="电话" v-model="obj.phone" />
        <input type="text" placeholder="身份证号" v-model="obj.sfz" />
        <input type="button" @click="edit" value="修改" class="bu">
    </div>
</template>

<style scoped>
    .box{
        display: flex;
        flex-direction:column;
        /* justify-content: center; */
        align-items: center;
        width:260px;
        height: 170px;
        gap:20px;
        /* margin-top:50px; */
        position: absolute;
        left: 45%;
        top: 30%;
        background-color: #eee;
        box-shadow: 2px 2px 5px rgba(0, 0.2, 0, 0.3); 
    }
    .x{
        display: flex;
        width: 245px;
        justify-content: space-between;
        color: #0aa;
    }
    .bu{
        cursor: pointer;
        background-color: #0aa;
        width: 180px;
        color: white;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
    }
    .bu:hover{
        background-color: #cb119a; /* Green */
        color: white;
    }
    input{
        outline: none;
        border: 0;
        /* height: 100px; */
        padding: 7px;
        /* background-color: #0aa; */
    }
</style>